<template>
  <view id="app">
    <button @click="open">验证</button>
    <slider-captcha v-model="visible" :options="options" :loading="loading" @check="check" @close="close" @refresh="getSliderOptions" @error="getSliderOptions">
      <!-- vue3 -->
      <template #title>自定义标题-安全验证</template>
      <template #successText>自定义成功提示-登录中</template>
      <template #errorText>自定义错误提示-是不是太难了换一个</template>
      <template #tips>自定义提示拖动下方滑块完成拼图</template>
      <!-- <template #question>自定义提示</template> -->
      <!-- vue3 -->
    </slider-captcha>
  </view>
</template>
<script>
  import SliderCaptcha from '@/components/kkokk-slider-captcha/kkokk-slider-captcha.vue'
  export default {
    components: { SliderCaptcha },
    data() {
      return {
        visible: false,
        loading: false,
        options: {}
      }
    },
    methods: {
      // 打开触发
      open() {
        this.visible = true
        this.getSliderOptions()
      },
      // 验证
      check(sliderKey, sliderX, done, error) {
        this.loading = true
      },
      // 关闭触发
      close() {},
      // 获取滑块验证参数
      getSliderOptions() {
        this.loading = true
        this.options = {
          sliderImg: 'https://hangjiayun.oss-cn-shanghai.aliyuncs.com/allxcx/bbt/images/productConfirm.png',
          slideKey: 1,
          sliderY: 221
        }
        this.loading = false
      }
    }
  }
</script>
